<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('market.share') }}</view>
    </view>
    <view class="main">
        <view class="cate-item" v-for="(item, index) in market" :key="index" @click="detail(item.symbol)">
            {{ item.stockName }}
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { requestApi } from '@/api'
// // 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
function detail(symbol) {
    uni.navigateTo({
        url: '/pages/zhishuDetail/zhishuDetail' + `?symbol=${JSON.stringify(symbol)}`
    })
}
const market = ref([])
async function getMarket() {
    const { data, status } = await requestApi.getMarket()
    if (status == 0) {
        market.value = data.map((item) => {
            if (item.result != null) {
                const { meta,indicators } = item.result[0]
                const { quote } = indicators
                if (quote[0].close != null) {
                    const { regularMarketPrice, chartPreviousClose, rate } = meta
                    const { stockName } = item
                    const increaseRate = rate * 100
                    return {
                        regularMarketPrice,
                        chartPreviousClose,
                        increaseRate: increaseRate.toFixed(2),
                        ...meta,
                        stockName
                    }
                }
            }
        })
    }
}

onMounted(() => {
    getMarket()
})
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    padding-top: 20rpx;
    //  #ifndef H5
    padding-top: 80rpx;
    //  #endif
    padding-bottom: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: #202129;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    padding-top: 108rpx;
    //  #ifndef H5
    padding-top: 196rpx;

    //  #endif
    .cate-item {
        text-align: center;
        background-color: #1574EC;
        color: #fff;
        padding: 10px;
        font-size: 1.2rem;
        margin: 10px;
        border-radius: 50px;
        width: 500rpx;
        margin: 0 auto 50rpx;
        height: 96rpx;
    }
}
</style>